<template>
    <div class="header">
      <span class="iconfont" @click='toUpper'>&#xe601;</span>
       <div class="shop_search">
         <Search placeholder='请输入商品名称搜索'></Search>
       </div>
    </div>

    <div class="banner">
      <Nearby-shop :item='item' border="" v-if="item!=null"></Nearby-shop>
    </div>

    <div class="shop_main">
      <Main :items='item2' @tabs='tabSwitch' v-if="item2!=null"></Main>
    </div>

     <Tabber @spgcartList='spgcartList'></Tabber>

    <Mask v-if='spacartShow'></Mask>

    <div class="spgcart" v-if='spacartShow'>
      <div class="spgcart_header">
    <div class="spgcart_header_left" @click="activefn">
      <span class="iconfont" :class='{"active":active}' ref='nodeSpan'>&#xe8bd;</span>
      <span class="text">全选</span></div>
    <div class="spgcart_header_right" @click="remove">删除</div>
      </div>
      <div class="spgcart_main">
        <Spgcart :active='active' v-show='ulShow'></Spgcart>
      </div>
    </div>
</template>

<script>
import Search from '../../components/search/search.vue'
import Mask from '../../components/mask/mask.vue'
import Spgcart from './spgcart.vue'
import Tabber from './tabber.vue'
import NearbyShop from '../../components/nearbyShop/nearbyShop.vue'
import Main from './main.vue'
import { useRouter, useRoute } from 'vue-router'
import { reactive, toRefs, ref } from '@vue/reactivity'
import { ajax, bus } from '../../assets/js/public.js'

const shopList = reactive({
  spacartShow: false,
  item: null,
  item2: null,
  active: false,
  ulShow: true
})
export default {
  name: 'Shop',
  components: {
    Search,
    NearbyShop,
    Main,
    Tabber,
    Mask,
    Spgcart
  },
  setup () {
    const router = useRouter()
    const route = useRoute()
    const nodeSpan = ref(null)
    const shopId = route.params.id
    // toRefs可以给响应式对象的每个属性添加响应式状态
    const { item, item2, spacartShow, active, ulShow } = toRefs(shopList)
    // 请求店铺数据
    ajax({
      url: `https://www.fastmock.site/mock/725f551276b487c75861c5507f612adb/jingdong/api/shop/${shopId}`,
      type: 'get',
      list: item
    })
    // 请求tab列表数据
    ajax({
      url: `https://www.fastmock.site/mock/725f551276b487c75861c5507f612adb/jingdong/api/shop/${shopId}/products`,
      type: 'get',
      params: {
        tab: 'all'
      },
      list: item2
    })

    // 后退按钮
    function toUpper () {
      router.back()
    }

    // 请求tab切换数据
    function tabSwitch (targetName, targetTitle) {
      if (targetName === 'LI') {
        ajax({
          url: `https://www.fastmock.site/mock/725f551276b487c75861c5507f612adb/jingdong/api/shop/${shopId}/products`,
          type: 'get',
          params: {
            tab: targetTitle
          },
          list: item2
        })
      }
    }

    // 元素显示隐藏逻辑
    function spgcartList () {
      spacartShow.value = !spacartShow.value
      active.value = false
    }

    // 全选按钮
    function activefn () {
      active.value = !active.value
      bus.emit('removeAll', active.value)
    }

    // 删除按钮
    function remove () {
      bus.emit('remove')
      active.value = false
    }

    //  总线事件jiant
    bus.off('removeAllActive')
    bus.on('removeAllActive', () => {
      nodeSpan.value.classList.remove('active')
    })

    return { toUpper, item, item2, tabSwitch, spgcartList, spacartShow, active, activefn, remove, ulShow, nodeSpan }
  }
}

</script>

 <style lang="scss" scoped>
 .header{
   margin: 0.08rem 0 .16rem .18rem;
   display: flex;
   .shop_search{
     width: 3.1rem;
     height: .32rem;
     margin-left: .16rem;
   }
   .iconfont{
     color: #b6b6b6;
     font-size: .2rem;
     line-height: .32rem;
   }
 }
 .banner{
    margin-left: .18rem;
 }
 .shop_main{
   display: flex;
   position: absolute;
   top:1.5rem;
   left: 0;
   right: 0;
   bottom:.49rem;
   font-size: .14rem;
 }
  .mask{
   bottom: .49rem;
 }
 .spgcart{
   box-sizing: border-box;
   width: 100%;
   padding: 0 .18rem;
   position: absolute;
   left: 0;
   bottom: .49rem;
   z-index: 3;
   background-color: #ffffff;
 }
 .spgcart_header{
   height: .52rem;
   border-bottom: 1px solid #f1f1f1;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
.spgcart_header_left{
  .iconfont{
    font-size: .2rem;
    margin-right: .084rem;
    color: #666666;
  }
.active{
        color: #0091FF ;
}
  .text{
    vertical-align: .03rem
  }
}
 </style>
